<template>
  <header class="app-header">
    <div class="header-left">
      <div class="logo">
        <svg viewBox="0 0 100 100" class="logo-icon">
          <circle cx="50" cy="50" r="40" fill="#2984F8" />
          <path d="M30,30 L70,30 L70,70 L30,70 Z" fill="white" />
        </svg>
      </div>
      <span class="title">家庭医生后台系统</span>
    </div>

    <div class="header-right">
      <div class="header-actions">
        <el-badge :value="messageItemStore.unreadAnnReceivers.length" class="message-badge" @click="goToAnnouncements">
          <el-icon :size="20"><Bell /></el-icon>
        </el-badge>
        <el-badge :value="messageItemStore.unreadConversations.length" class="message-badge" @click="goToMessages">
          <el-icon :size="20"><ChatSquare /></el-icon>
        </el-badge>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <el-avatar size="small" :src="userItemStore.user.doctorAvatar" />
            <span class="username">{{ userItemStore.user.username }}</span>
            <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="getProfile" command="profile">我的资料</el-dropdown-item>
              <el-dropdown-item @click="resetPassword" command="password">重置密码</el-dropdown-item>
              <el-dropdown-item @click="logout" command="logout">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Bell, ArrowDown, ChatSquare } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { userStore } from '/src/components/store/index.js';
import { messageStore } from '/src/components/store/message.js';
import axios from "axios";
import request from "@/utils/request.js";

const router = useRouter();
const userItemStore = userStore();
const messageItemStore = messageStore();



// 页面跳转
const goToAnnouncements = () => router.push('/myAnnouncement');
const goToMessages = () => router.push('/myMessage');

const getProfile = () => router.push('/getProfile');
const resetPassword = () => router.push('/resetPassword');

const logout = () => {
  ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
  ).then(() => {
    request.get(`/personalProfile/logout/${userItemStore.user.id}`)
        .then(resp => {
          ElMessage.success(resp.data);
          localStorage.removeItem('token');
          localStorage.removeItem('user');
          userItemStore.clearUser();
          messageItemStore.clearConversationAndMessages();
        });
    //更新离线状态
    request.put(`/doctor/offline/${userItemStore.user.id}`).then(resp=>{
      ElMessage.success(resp.data);
      setTimeout(() => location.href = "http://localhost:9099", 500);
    })
  }).catch(() => console.log('取消退出'));
};

onMounted(() => {

});
</script>

<style scoped>
.app-header {
  height: 60px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.logo-icon {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #2984F8;
}

/* 修改后的右侧样式 */
.header-right {
  margin-left: auto; /* 确保靠右 */
  display: flex;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px; /* 元素间距 */
}

.message-badge {
  cursor: pointer;
  color: #606266;
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #606266;
  gap: 8px;
}

.username {
  font-size: 14px;
}

.dropdown-arrow {
  margin-left: 4px;
  transition: transform 0.3s;
}

.el-dropdown-link:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.el-avatar {
  border: 1px solid #eee;
}
</style>